<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="hoverIntent.js"></script>
  <script src="https://en.js.cx/test/libs.js"></script>
  <script src="test.js"></script>
</head>

<body>

  <div id="elem" class="clock">
    <span class="hours">12</span> :
    <span class="minutes">30</span> :
    <span class="seconds">00</span>
  </div>

  <div id="tooltip" hidden>Подсказка</div>

  <script>
    // для демо
    setTimeout(function() {
      new HoverIntent({
        elem,
        over() {
          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
          tooltip.hidden = false;
        },
        out() {
          tooltip.hidden = true;
        }
      });
    }, 2000);
  </script>

</body>
</html>
